<template>
   <view class="category">
      <!-- 搜索框 -->
      <Search></Search>
      <!-- 分类 -->
      <view class="categories">
         <!-- 左侧：一级分类 -->
         <scroll-view class="primary" scroll-y :style="{height:windowHeight+'px'}">
            <view v-for="(cate, index) in cateList" :key="cate.id" class="item" :class="{ active: index === activeIndex }">
               <text class="name" @tap="changeActive(index)">{{ cate.name }}</text>
            </view>
         </scroll-view>
         <!-- 右侧：二级分类 -->
         <scroll-view class="secondary" scroll-y :style="{height:windowHeight+'px'}">
            <!-- 焦点图 -->
            <Carousel class="banner" :list="bannerList" />
            <!-- 内容区域 -->
            <view class="panel" v-for="child in childrenCateList" :key="child.id">
               <view class="title">
                  <text class="name">{{ child.name }}</text>
                  <navigator class="more" hover-class="none" :url=" `/subPackages/goodList/goodList?categoryId=${child.id}`">全部</navigator>
               </view>
               <view class="section">
                  <Cate v-for="cate in child.goods" :cate="cate"></Cate>
               </view>
            </view>
         </scroll-view>
      </view>
   </view>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { storeToRefs } from "pinia";
import useCategoryStore from "@/pinia/modules/categoryStore";
import useHomeStore from "@/pinia/modules/homeStore";
import { onLoad } from "@dcloudio/uni-app";
import Search from "./components/Search/Search.vue";
import Cate from "./components/Cate/Cate.vue";

const categoryStore = useCategoryStore();
const homeStore = useHomeStore();
const { cateList } = storeToRefs(categoryStore);
const { bannerList } = storeToRefs(homeStore);
const activeIndex = ref(0);
const childrenCateList = computed(() => cateList?.value[activeIndex.value]?.children);
const { windowHeight } = uni.getSystemInfoSync();
// 获取轮播图
const fetchBannerList = async () => {
   try {
      await homeStore.fetchBannerList(2);
   } catch (error: any) {
      await uni.showToast({ title: error.message, icon: "error" });
   }
};

// 获取分类
const fetchCateList = async () => {
   try {
      await categoryStore.fetchCateList();
   } catch (error: any) {
      await uni.showToast({ title: error.message, icon: "error" });
   }
};

const changeActive = (index: number) => {
   activeIndex.value = index;
};

onLoad(() => {
   fetchCateList();
   fetchBannerList();
});
</script>


<style scoped lang="scss">
page {
   height: 100%;
}
.category {

   display: flex;
   flex-direction: column;

   .categories {
      flex: 1;
      display: flex;

      ::v-deep .primary {
         overflow: hidden;
         width: 180rpx;
         flex: none;
         background-color: #f6f6f6;

         .item {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 96rpx;
            font-size: 26rpx;
            color: #595c63;
            position: relative;

            &::after {
               content: '';
               position: absolute;
               left: 42rpx;
               bottom: 0;
               width: 96rpx;
               border-top: 1rpx solid #e3e4e7;
            }
         }

         .active {
            background-color: #fff;

            &::before {
               content: '';
               position: absolute;
               left: 0;
               top: 0;
               width: 8rpx;
               height: 100%;
               background-color: #27ba9b;
            }
         }
      }

      .primary .item:last-child::after,
      .primary .active::after {
         display: none;
      }

      .secondary {
         background-color: #fff;

         ::v-deep .carousel {
            height: 200rpx;
            margin: 0 30rpx 20rpx;
            border-radius: 4rpx;
            overflow: hidden;

         }

         .panel {
            /* #ifndef MP-WEIXIN */
            margin: 0 30rpx 0rpx;
            /* #endif */

            /* #ifdef MP-WEIXIN */
            margin: 0 10rpx 0rpx;
            /* #endif */

            .title {
               padding: 0;

               .name {
                  font-size: 25rpx;
               }
            }
         }

         .title {
            height: 60rpx;
            line-height: 60rpx;
            color: #333;
            font-size: 28rpx;
            border-bottom: 1rpx solid #f7f7f8;

            .more {
               float: right;
               padding-left: 20rpx;
               font-size: 24rpx;
               color: #27ba9b;
            }
         }

         .more {
            &::after {
               font-family: 'erabbit' !important;
               content: '\e6c2';
            }
         }

         .section {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            padding: 20rpx 0;

         }
      }
   }
}
</style>
